<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/14 0014
  Time: 下午 2:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>钦安网盘</title>
<head>
    <script src="js/jquery-3.1.1.js"></script>
    <script rel="stylesheet" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>

<div class="loader" id="loader">
    <div class="item-1"><span></span></div>
    <div class="item-2"><span></span></div>
    <div class="item-3"><span></span></div>
    <div class="item-4"><span></span></div>
    <div class="item-5"><span></span></div>
    <div class="item-6"><span></span></div>
    <div class="item-7"><span></span></div>
    <div class="item-8"><span></span></div>
</div>
</body>
</html>
<script>
    function codefans() {
        var box = document.getElementById("loader");
        box.style.display = "none";
    }
    setTimeout("codefans()", 5000);
</script>
<style>
    .loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        z-index: 2;
        font-size: 32px;
    }

    .loader div {
        position: absolute;
        top: 50%;
        left: 50%;
        will-change: transform;
    }

    .loader div span {
        display: block;
        width: 0.5em;
        height: 0.15em;
        background: white;
        border-radius: 0.08em;
    }

    .loader .item-1 {
        margin-left: 11.313708496px;
        margin-top: -11.313708496px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-1 span {
        -webkit-transform: rotate(45deg) translateZ(0);
        transform: rotate(45deg) translateZ(0);
    }

    .loader .item-2 {
        margin-left: 0px;
        margin-top: -16px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-2 span {
        -webkit-transform: rotate(180deg) translateZ(0);
        transform: rotate(180deg) translateZ(0);
    }

    .loader .item-3 {
        margin-left: -11.313708496px;
        margin-top: -11.313708496px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-3 span {
        -webkit-transform: rotate(135deg) translateZ(0);
        transform: rotate(135deg) translateZ(0);
    }

    .loader .item-4 {
        margin-left: -16px;
        margin-top: 0px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-4 span {
        -webkit-transform: rotate(270deg) translateZ(0);
        transform: rotate(270deg) translateZ(0);
    }

    .loader .item-5 {
        margin-left: -11.313708496px;
        margin-top: 11.313708496px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-5 span {
        -webkit-transform: rotate(225deg) translateZ(0);
        transform: rotate(225deg) translateZ(0);
    }

    .loader .item-6 {
        margin-left: 0px;
        margin-top: 16px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-6 span {
        -webkit-transform: rotate(360deg) translateZ(0);
        transform: rotate(360deg) translateZ(0);
    }

    .loader .item-7 {
        margin-left: 11.313708496px;
        margin-top: 11.313708496px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-7 span {
        -webkit-transform: rotate(315deg) translateZ(0);
        transform: rotate(315deg) translateZ(0);
    }

    .loader .item-8 {
        margin-left: 16px;
        margin-top: 0px;
        -webkit-animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: spin_full 2s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    }

    .loader .item-8 span {
        -webkit-transform: rotate(450deg) translateZ(0);
        transform: rotate(450deg) translateZ(0);
    }

    @-webkit-keyframes spin_full {
        0% {
            -webkit-transform: rotate(0deg) translateZ(0);
            transform: rotate(0deg) translateZ(0);
        }
        100% {
            -webkit-transform: rotate(360deg) translateZ(0);
            transform: rotate(360deg) translateZ(0);
        }
    }

    @keyframes spin_full {
        0% {
            -webkit-transform: rotate(0deg) translateZ(0);
            transform: rotate(0deg) translateZ(0);
        }
        100% {
            -webkit-transform: rotate(360deg) translateZ(0);
            transform: rotate(360deg) translateZ(0);
        }
    }

</style>
